1
00:00:00,320 --> 00:00:01,070
All right.

2
00:00:01,070 --> 00:00:06,260
In this lecture we're going to take a look at some of the UI constraints available to us.

3
00:00:06,260 --> 00:00:10,490
To help improve the design and functionality of our GUIs.

4
00:00:10,490 --> 00:00:16,100
You will be using UI constraints often in your GIS, because they help you in many different ways.

5
00:00:16,100 --> 00:00:21,890
To take a look at all of the available UI constraints, we can just simply type in UI, and here we'll

6
00:00:21,890 --> 00:00:24,560
pop up all of the different UI constraints available.

7
00:00:24,560 --> 00:00:29,870
For example, you have a UI stroke constraint it says applies an outline around a UI object.

8
00:00:29,870 --> 00:00:37,160
We have a UI corner UI aspect ratio constraint, a gradient, a size constraint, grid layout list layout,

9
00:00:37,190 --> 00:00:43,070
table layouts, UI padding, UI, page layout, text size constraint, and UI scale.

10
00:00:43,070 --> 00:00:48,710
So there's a whole bunch of different constraints here that will change the look of our guys and how

11
00:00:48,710 --> 00:00:49,670
they function.

12
00:00:49,670 --> 00:00:54,710
The first one we should take a look at is going to be the simplest, which is the UI stroke.

13
00:00:54,710 --> 00:01:01,010
So what this is going to do is it's going to apply an outline or a stroke around a particular GUI object.

14
00:01:01,010 --> 00:01:08,390
And if you notice my scrolling frame now has a thin black border around it, and I can increase this

15
00:01:08,390 --> 00:01:09,170
thickness.

16
00:01:09,170 --> 00:01:11,510
For example, if I set it to 20 pixels.

17
00:01:11,510 --> 00:01:15,560
Now I have a 20 pixel stroke around my scrolling frame.

18
00:01:15,560 --> 00:01:18,560
I am able to change the color of this.

19
00:01:18,560 --> 00:01:21,860
If I want to make a green or blue or red, I can do that.

20
00:01:21,860 --> 00:01:28,970
And then I'm also able to change the line join mode, which is going to affect the corners of my UI

21
00:01:29,000 --> 00:01:29,480
stroke.

22
00:01:29,480 --> 00:01:33,230
So if I set it to bevel, it's going to bevel the edges.

23
00:01:33,230 --> 00:01:35,840
Round is of course going to round the edges.

24
00:01:35,840 --> 00:01:40,340
And then this last option is going to make the corners sharp.

25
00:01:41,140 --> 00:01:45,670
And we're also able to adjust the transparency of this as well.

26
00:01:45,670 --> 00:01:48,040
So if I want to make it more transparent, I could do that.

27
00:01:48,040 --> 00:01:52,480
If I want to make it completely transparent, boom or make it completely opaque, boom.

28
00:01:52,480 --> 00:01:58,120
And then there's this other option called apply stroke mode, which is border or contextual.

29
00:01:58,120 --> 00:02:02,530
This setting is specifically for any text related GUI objects.

30
00:02:02,530 --> 00:02:09,280
So for example, if I placed a text label into my screen, guy and I were to take this UI stroke and

31
00:02:09,280 --> 00:02:13,390
place it in the text label, let me go ahead and decrease the thickness here.

32
00:02:13,390 --> 00:02:17,950
What you're going to see is that it has applied that stroke around the text.

33
00:02:17,950 --> 00:02:19,570
So let me scale this text up.

34
00:02:20,040 --> 00:02:27,060
So instead of having to use the text stroke color and the text stroke transparency property of our text

35
00:02:27,060 --> 00:02:29,460
label, instead, we're using a UI stroke.

36
00:02:29,460 --> 00:02:33,150
And this allows us to change the size of the stroke.

37
00:02:33,150 --> 00:02:35,340
So if we want it to be very small, we can do that.

38
00:02:35,340 --> 00:02:38,520
Or if we want to set it to be very large, we can do that as well.

39
00:02:38,520 --> 00:02:41,610
We can adjust the transparency and the color.

40
00:02:41,610 --> 00:02:43,800
We can adjust these different modes.

41
00:02:43,800 --> 00:02:46,620
So if we want to round out the edges, we can do that.

42
00:02:46,620 --> 00:02:49,530
If we want to bevel the edges, we can do that as well.

43
00:02:49,530 --> 00:02:54,420
Or if we want to have them to be sharp with the meter mode, then we can do that as well.

44
00:02:54,960 --> 00:03:00,450
So there's a lot more options here than with the standard properties that are inside of the text label.

45
00:03:00,450 --> 00:03:06,810
If I wanted to apply this stroke to the border of this text label rather than the text itself, then

46
00:03:06,810 --> 00:03:10,620
I can change the apply stroke mode from contextual to border.

47
00:03:10,620 --> 00:03:14,580
So now it's going to be applied on the border and not the text itself.

48
00:03:14,580 --> 00:03:18,900
If I want to apply it to both the border and the text, and then I can simply just make a second one

49
00:03:18,900 --> 00:03:21,330
of these and set this one to be contextual.

50
00:03:21,330 --> 00:03:24,660
So now I have two different strokes on my text label.

51
00:03:24,990 --> 00:03:29,190
The next UI constraint we can go ahead and look at is something called UI corner.

52
00:03:29,190 --> 00:03:32,520
Now UI corner is not going to work on scrolling frames.

53
00:03:32,520 --> 00:03:36,480
So we need to insert a regular frame in here and I'll show you how it works.

54
00:03:36,480 --> 00:03:39,630
Let me go ahead and move this scrolling frame out of the way.

55
00:03:39,630 --> 00:03:44,430
Let me size this one up and let's go ahead and add a UI corner.

56
00:03:44,430 --> 00:03:47,970
So what this is going to do is it's going to round the corners.

57
00:03:47,970 --> 00:03:51,750
And you're able to determine that either with a scale or offset.

58
00:03:51,750 --> 00:03:57,570
So right now the corners are being rounded with a total size of eight pixels.

59
00:03:57,570 --> 00:04:02,580
And if I want to make this rounding even larger I can increase this to be let's say 50 pixels.

60
00:04:02,580 --> 00:04:08,610
So even if I were to resize my screen, the rounding of the corners of this frame is always going to

61
00:04:08,610 --> 00:04:10,440
be 50 pixels in size.

62
00:04:10,440 --> 00:04:17,040
If instead I want this to match the scaling and resizing of the screen, then I can set this to be scale

63
00:04:17,040 --> 00:04:17,520
instead.

64
00:04:17,520 --> 00:04:19,290
And I could do something like this.

65
00:04:19,290 --> 00:04:26,040
So now the rounding of the corners of my object is going to depend on the size of my screen.

66
00:04:26,040 --> 00:04:29,430
And actually let me go ahead and convert this to scale.

67
00:04:30,180 --> 00:04:30,840
Okay.

68
00:04:30,840 --> 00:04:36,720
Now if I go and resize it, you're going to notice that the rounding of the corners has decreased.

69
00:04:36,720 --> 00:04:40,110
And if I increase it, you can see they've gotten larger.

70
00:04:40,110 --> 00:04:44,070
If I instead replace this with a constant let's say 20 pixels.

71
00:04:44,070 --> 00:04:46,800
And then I were to resize my screen.

72
00:04:46,800 --> 00:04:50,370
As you can see it's still going to keep that 20 pixels of rounding.

73
00:04:50,730 --> 00:04:55,140
The next constraint we can go ahead and take a look at is the UI aspect ratio constraint.

74
00:04:55,140 --> 00:05:00,690
And this is specifically for when you want to keep a particular aspect ratio with your objects.

75
00:05:00,690 --> 00:05:07,650
So with this frame, if I were to resize my screen, as you can see the shape of this object has changed.

76
00:05:07,650 --> 00:05:09,180
It's now more elongated.

77
00:05:09,180 --> 00:05:14,040
And if I were to bring this size back down, as you can see now, it resembles more of a cube.

78
00:05:14,040 --> 00:05:18,810
Now let's say I always wanted this frame right here to be in the shape of a cube.

79
00:05:18,810 --> 00:05:25,020
Well, this is where I would add a UI aspect ratio constraint to this object and keep it with an aspect

80
00:05:25,020 --> 00:05:26,730
ratio of one.

81
00:05:26,730 --> 00:05:31,860
So that means the height and the length of this object are going to be the same.

82
00:05:31,860 --> 00:05:37,410
So even if I were to resize my screen, it's always going to stay in the shape of a cube.

83
00:05:37,410 --> 00:05:43,530
If I change the aspect ratio to, let's say the value of three, now the length is going to be three

84
00:05:43,530 --> 00:05:48,990
times the height of my object, and it's going to stay with that particular ratio.

85
00:05:49,700 --> 00:05:52,790
The next constraint we can go in and take a look at is UI gradient.

86
00:05:52,790 --> 00:05:56,510
And this one's very cool because it allows you to make gradient colors.

87
00:05:56,510 --> 00:06:01,370
So let's say I wanted the background of my frame here to be a gradient.

88
00:06:01,370 --> 00:06:06,140
So we'll have a color on one side and it slowly transitions to a different color on the other side.

89
00:06:06,140 --> 00:06:08,480
Well that's what we use a UI gradient for.

90
00:06:08,480 --> 00:06:13,250
So we can open up these three dots right here and define what we want the color to be on the left side.

91
00:06:13,250 --> 00:06:16,550
Let's say I want it to be a nice red.

92
00:06:16,550 --> 00:06:21,890
And then on the right side let's make this color a blue.

93
00:06:22,640 --> 00:06:23,420
So there we go.

94
00:06:23,420 --> 00:06:27,530
Now we have our gradient transitioning from red to blue.

95
00:06:27,530 --> 00:06:30,710
And of course we can insert as many other colors as we want in here.

96
00:06:30,710 --> 00:06:32,150
So I could put a green in the middle.

97
00:06:32,150 --> 00:06:35,060
And now we have a transition from red to green to blue.

98
00:06:35,360 --> 00:06:40,610
And then if I wanted to change the direction that this gradient is being applied, maybe I don't want

99
00:06:40,610 --> 00:06:45,740
it to be from left to right, but maybe I want it to be from a top to bottom.

100
00:06:45,740 --> 00:06:48,080
Then we can go ahead and adjust the rotation property.

101
00:06:48,080 --> 00:06:50,360
So let's go ahead and rotate this by 90 degrees.

102
00:06:50,360 --> 00:06:52,880
And now the gradient is applied at the top.

103
00:06:52,880 --> 00:06:55,010
Go into green and then down to blue.

104
00:06:55,040 --> 00:06:58,550
We can also change the transparency of this color gradient.

105
00:06:58,550 --> 00:07:00,350
And we can even do it over time.

106
00:07:00,350 --> 00:07:02,000
So for example in the beginning.

107
00:07:02,800 --> 00:07:07,900
Maybe I want it to be completely opaque, and then over time, I want the color to fade out like that.

108
00:07:07,900 --> 00:07:08,800
And there you go.

109
00:07:08,800 --> 00:07:15,040
Now you can see behind our object with this nice transparency gradient going on here.

110
00:07:15,890 --> 00:07:20,060
We can also offset this color gradient as well if you need to shift things around.

111
00:07:20,060 --> 00:07:24,620
So shifting it on the x axis isn't going to do anything, but we can shift it on the y axis.

112
00:07:24,620 --> 00:07:29,330
So for example, if I put like a value of ten here we have shifted downwards ten actually let me try

113
00:07:29,330 --> 00:07:31,820
to make this I think this is set with scale.

114
00:07:31,820 --> 00:07:34,790
So if you set this to one yeah it's going to be completely red.

115
00:07:34,820 --> 00:07:38,990
If you do 0.1 and it's going to shift it down a 10th of the height.

116
00:07:39,290 --> 00:07:41,990
And if I do 0.5 then it's going to be half the height.

117
00:07:41,990 --> 00:07:44,480
So that's what the offset property does.

118
00:07:44,480 --> 00:07:47,180
And that's just kind of it with UI gradients.

119
00:07:47,180 --> 00:07:51,020
Now you can take these UI gradients and you can apply them on other things.

120
00:07:51,020 --> 00:07:58,400
For example, if I had a UI stroke on my frame, let me make this thicker and let me set the color to

121
00:07:58,400 --> 00:07:59,120
white.

122
00:07:59,120 --> 00:08:02,870
And then I were to take my UI gradient and put it in my UI stroke.

123
00:08:02,870 --> 00:08:05,780
Now the gradient has been applied to the stroke.

124
00:08:05,780 --> 00:08:10,520
So you can see it starts with red at the top, goes to green, and then slowly fades out to blue until

125
00:08:10,520 --> 00:08:11,570
there's nothing left.

126
00:08:11,570 --> 00:08:12,590
Very cool.

127
00:08:13,280 --> 00:08:18,950
The next constraint here is called a UI size constraint, and as the name suggests, it stops our GUI

128
00:08:18,980 --> 00:08:24,500
from going beyond a maximum size and a minimum size, and this is set in pixels.

129
00:08:24,500 --> 00:08:33,740
So if I want to, let's say, not have my guy go beyond 300 by let's say 100 pixels, then I can do

130
00:08:33,740 --> 00:08:34,340
that.

131
00:08:34,340 --> 00:08:42,980
And then the minimum size may be the minimum size can be, um, I don't know, let's say 150 by 50 pixels.

132
00:08:42,980 --> 00:08:48,500
So if I start to resize my screen, let me try and shrink this down as much as possible.

133
00:08:48,590 --> 00:08:53,030
As you can see, it's going to continue to shrink, but eventually we're going to hit a point where

134
00:08:53,030 --> 00:08:59,810
the size of the GUI is now 50 by 100 pixels or 150 pixels, and it doesn't shrink any more than that,

135
00:08:59,810 --> 00:09:03,020
because that's what we have defined to be the minimum size.

136
00:09:03,020 --> 00:09:07,970
And then for the maximum size, it's going to continue growing as I resize my screen.

137
00:09:07,970 --> 00:09:11,000
But then eventually, as you can see, it has stopped growing.

138
00:09:11,000 --> 00:09:14,030
And that's because it has reached the maximum size.

139
00:09:14,030 --> 00:09:19,310
And you can also see that it still respects our UI aspect ratio constraint.

140
00:09:19,310 --> 00:09:24,080
So even if you were to set the maximum size to be 100 to 100.

141
00:09:24,930 --> 00:09:25,680
What does it say?

142
00:09:25,710 --> 00:09:27,960
Fail to set UI size constraint max.

143
00:09:28,170 --> 00:09:30,150
Oh, let me go ahead and readjust that.

144
00:09:30,150 --> 00:09:32,400
So let me go ahead and set this to like 50.

145
00:09:32,430 --> 00:09:37,500
If I were to set this x to 100, what you're going to notice is that the size isn't going to be set

146
00:09:37,500 --> 00:09:43,560
to 100 by 100 pixels, but it's still going to respect that UI aspect ratio constraint.

147
00:09:44,170 --> 00:09:52,090
But now instead, the size on the x axis is going to be 100 pixels, and then the size on the y axis

148
00:09:52,120 --> 00:09:53,860
is going to be a third of that.

149
00:09:54,040 --> 00:09:59,980
Now these other UI constraints here such as grid layout, the other ones list layout, table layout,

150
00:09:59,980 --> 00:10:02,530
and I believe the last one is page layout.

151
00:10:02,530 --> 00:10:07,630
These are specifically for organizing how objects go into frames, and most of the time you're going

152
00:10:07,630 --> 00:10:10,270
to be using them when you are using scrolling frames.

153
00:10:10,270 --> 00:10:11,710
So let's go ahead and take a look at those.

154
00:10:11,710 --> 00:10:13,570
I'm going to delete this frame here.

155
00:10:13,570 --> 00:10:17,350
And let's go ahead and focus on our scrolling frame.

156
00:10:17,350 --> 00:10:20,200
So let me move this back to the center of the screen.

157
00:10:20,860 --> 00:10:24,280
Now if I add something in here like a UI.

158
00:10:24,310 --> 00:10:26,860
Let's take a look at the list layout.

159
00:10:27,540 --> 00:10:33,210
What this is going to help us do is any time a child is added to our scrolling frame, it's going to

160
00:10:33,210 --> 00:10:35,460
organize it in a list for us.

161
00:10:35,490 --> 00:10:37,830
So let me put a frame inside of here.

162
00:10:37,830 --> 00:10:41,040
Let me change the color to be something different than the background.

163
00:10:41,040 --> 00:10:42,960
And then let me resize this.

164
00:10:42,960 --> 00:10:44,310
So it's something like that.

165
00:10:44,310 --> 00:10:49,500
If I were to duplicate this frame, as you can see, instead of it being in the same position as the

166
00:10:49,500 --> 00:10:51,390
other frame, it has been shifted down.

167
00:10:51,390 --> 00:10:58,050
And as I continued to duplicate, it's going to continue filling them out as a list, and it's filling

168
00:10:58,050 --> 00:11:00,450
up our scrolling frame.

169
00:11:00,450 --> 00:11:05,520
Now, this UI list layout gives me the ability to add padding between the different objects.

170
00:11:05,520 --> 00:11:10,410
So if I wanted to add a five pixel gap between each of the objects, I could do that.

171
00:11:10,410 --> 00:11:16,920
So now, every single time each one of my objects has a five pixel gap, and I can also define what

172
00:11:16,920 --> 00:11:18,570
direction they should be filled in.

173
00:11:18,570 --> 00:11:20,040
So right now it's set to vertical.

174
00:11:20,040 --> 00:11:22,440
So all the objects are going to be filled downwards.

175
00:11:22,440 --> 00:11:26,970
But if I were to set it to horizontal they're all going to be filled in that direction.

176
00:11:29,140 --> 00:11:34,540
The horizontal alignment, as the name suggests, tells me where I like to align these objects.

177
00:11:34,540 --> 00:11:36,760
So if I want to align it to the left, I can do that.

178
00:11:36,760 --> 00:11:38,620
And then there's also vertical alignment.

179
00:11:38,620 --> 00:11:43,390
If we want to put it in the center or on the bottom, we can do that as well.

180
00:11:43,960 --> 00:11:48,970
Now the cool thing about UI list layout is you can use them in conjunction with the scrolling frames.

181
00:11:48,970 --> 00:11:50,950
Automatic canvas size property.

182
00:11:51,130 --> 00:11:57,460
So for example, even if I were to set the canvas size of my scrolling frame to zero because I have

183
00:11:57,460 --> 00:12:02,740
automatic canvas size enabled, you will still see that the scrolling bar is here, and I can scroll

184
00:12:02,740 --> 00:12:05,620
down and go to the very last object in my frame.

185
00:12:05,620 --> 00:12:10,510
And now my scrolling frame perfectly fits all of the elements inside of here.

186
00:12:10,510 --> 00:12:16,630
As I continue to duplicate more and more frames, you can see that the canvas is resizing to accommodate

187
00:12:16,630 --> 00:12:18,070
those additional objects.

188
00:12:18,070 --> 00:12:19,900
So I can continue to scroll.

189
00:12:19,900 --> 00:12:20,860
And there we go.

190
00:12:20,860 --> 00:12:24,220
We fit all of the additional objects that we just duplicated.

191
00:12:24,220 --> 00:12:30,400
Now UI list layout are great for creating lists, but what if we wanted to create a grid of objects

192
00:12:30,400 --> 00:12:30,940
instead?

193
00:12:30,940 --> 00:12:37,000
So instead of having one, one, one in a downwards list, what if we would like to have multiple objects

194
00:12:37,000 --> 00:12:40,390
on the same line as a grid or tile pattern?

195
00:12:40,390 --> 00:12:43,960
Well, let's go ahead and delete these other objects.

196
00:12:43,960 --> 00:12:46,180
Let's get rid of our UI list layout.

197
00:12:46,180 --> 00:12:52,090
And by the way, with my UI list layout now gone, if I were to duplicate the frames, you can see that

198
00:12:52,090 --> 00:12:54,760
nothing is happening because they're all in the same position.

199
00:12:54,760 --> 00:12:58,840
There's no constraint to automatically position them to be one after the other.

200
00:12:59,110 --> 00:13:03,640
So yes, you need to use UI list layouts if you want to create a list.

201
00:13:03,880 --> 00:13:06,340
Now with the UI grid layout.

202
00:13:07,330 --> 00:13:12,880
What this is going to do is it's going to give you some properties for the size of each one of the individual

203
00:13:12,880 --> 00:13:14,350
tiles or cells.

204
00:13:14,350 --> 00:13:18,700
So right now each of those cells are set to 100 by 100 pixels.

205
00:13:18,700 --> 00:13:21,700
But of course you can set them to scale as well.

206
00:13:21,700 --> 00:13:27,880
And now what's going to happen as I duplicate my frames, it's going to now fill it out as a grid,

207
00:13:27,880 --> 00:13:29,920
and it's going to continue filling it out.

208
00:13:29,920 --> 00:13:31,900
And let me go ahead and duplicate a whole bunch of these.

209
00:13:32,590 --> 00:13:38,020
And since I have automatic canvas size enabled, you're going to see that my scrolling frame updates

210
00:13:38,020 --> 00:13:39,880
to fit these additional objects.

211
00:13:39,880 --> 00:13:46,720
So instead of having a list here, now we have a set of objects in their own individual cells or tiles.

212
00:13:47,640 --> 00:13:50,520
Inside of here, I can adjust the padding between them.

213
00:13:50,520 --> 00:13:54,510
So if I want to have greater padding, let's say on the x axis.

214
00:13:54,510 --> 00:13:57,240
So let's do like 20 pixels between.

215
00:13:57,240 --> 00:13:59,130
But on the y axis I want to keep five.

216
00:13:59,130 --> 00:14:00,660
I can totally do that.

217
00:14:01,020 --> 00:14:06,870
And instead of using offset for the cell size, because sometimes people might have smaller screens

218
00:14:06,870 --> 00:14:10,050
that may not be able to accommodate those objects.

219
00:14:10,050 --> 00:14:17,430
What I'm going to do is I'm going to convert my scrolling frame from size in pixels to scale.

220
00:14:17,520 --> 00:14:19,770
So that way it resizes.

221
00:14:19,770 --> 00:14:24,810
Now, what you're going to notice is, as I resize it, all of the elements inside of the scrolling

222
00:14:24,810 --> 00:14:29,310
frame are still remaining the same size, which may not be desired.

223
00:14:29,310 --> 00:14:29,850
Behavior.

224
00:14:29,850 --> 00:14:34,020
Sometimes you might want to scale down the objects inside of the scrolling frame.

225
00:14:34,020 --> 00:14:37,770
So what you want to do with this UI grid layout is you want to convert.

226
00:14:38,290 --> 00:14:39,880
From offset.

227
00:14:40,240 --> 00:14:43,810
Let's go ahead and zero that out and let's change it to scale.

228
00:14:43,810 --> 00:14:50,800
So with a scale on the x axis, if I wanted to let's say put four elements along the x axis, then I

229
00:14:50,800 --> 00:14:56,770
would put the scale size to be 0.25, which is a quarter of the size along the x axis.

230
00:14:56,770 --> 00:14:59,860
And then for the y axis I'm going to set it to a scale of one.

231
00:14:59,890 --> 00:15:07,450
Now what you're going to notice here is that each one of these objects is going to have a giant size,

232
00:15:07,630 --> 00:15:10,930
because it's filling up the entirety of the y axis.

233
00:15:10,930 --> 00:15:12,310
So we have a rectangular shape.

234
00:15:12,310 --> 00:15:18,100
And the other thing you're going to notice is that even though we set the scale to be 0.25, which would

235
00:15:18,100 --> 00:15:24,070
be a quarter, because we have this padding up here of 20 extra pixels between each of the objects.

236
00:15:24,070 --> 00:15:27,760
It wasn't able to fit the fourth element in here.

237
00:15:27,760 --> 00:15:33,910
So to account for that, what you can do with the offset is you can subtract this value by your padding

238
00:15:33,910 --> 00:15:34,930
on the x axis.

239
00:15:34,930 --> 00:15:42,160
So if I do -20 now I am able to fit those four elements because I have reduced the size on the x axis

240
00:15:42,160 --> 00:15:44,770
to account for that particular padding.

241
00:15:45,400 --> 00:15:52,270
Now let's say you still want to keep all of the objects in your grid layout as a cube shape.

242
00:15:52,270 --> 00:16:00,040
So we want to keep it as a square, but you want it to be able to scale along with the size of the screen.

243
00:16:00,040 --> 00:16:06,340
So what we can do is we can actually add a UI aspect ratio constraint as a child of our UI grid layout,

244
00:16:06,790 --> 00:16:10,180
so far nothing has changed, but that's just because we need to update our guy.

245
00:16:10,180 --> 00:16:12,430
So if I just scroll in it, there you go.

246
00:16:12,430 --> 00:16:17,950
Now each one of our objects has been updated to reflect an aspect ratio of one by one.

247
00:16:18,160 --> 00:16:22,270
We can also go ahead and change the sort order of these elements.

248
00:16:22,270 --> 00:16:24,310
And actually let me go ahead and change the padding.

249
00:16:24,310 --> 00:16:28,570
So on the x axis we're going to do an offset of five.

250
00:16:28,570 --> 00:16:33,340
And then for the y axis we're going to keep it at five.

251
00:16:33,340 --> 00:16:36,100
And then let me subtract this value by five instead.

252
00:16:36,100 --> 00:16:36,730
There we go.

253
00:16:36,730 --> 00:16:40,810
So now I have perfectly fit for elements across the x axis.

254
00:16:40,810 --> 00:16:47,200
And then because we are respecting this UI aspect ratio constraint, each one of my objects is a square.

255
00:16:47,200 --> 00:16:50,410
So I can scroll through and take a look at each one of my objects.

256
00:16:50,410 --> 00:16:51,490
Very very cool.

257
00:16:52,350 --> 00:16:57,180
Now, another thing you might wonder is, okay, this is nice and all, but what if I wanted to add

258
00:16:57,180 --> 00:17:02,880
some padding here to the left, or to the top or the bottom of my scrolling frame?

259
00:17:02,910 --> 00:17:06,030
Well, there's another UI constraint for that.

260
00:17:06,030 --> 00:17:08,250
It's called UI padding.

261
00:17:08,250 --> 00:17:09,870
So let's add that in there.

262
00:17:09,870 --> 00:17:14,850
And now we can go ahead and define padding for the right, the left the top and the bottom.

263
00:17:14,850 --> 00:17:20,340
So if I want to move these elements a little bit let's say four pixels from this side over.

264
00:17:20,340 --> 00:17:25,020
Well with the padding on the left, let's go ahead and apply an offset of four pixels.

265
00:17:25,020 --> 00:17:30,630
And now they have been sized four pixels away from the edge of that side of our frame.

266
00:17:30,630 --> 00:17:32,700
We can do the same thing for the top as well.

267
00:17:32,700 --> 00:17:35,940
If we want to do four pixels from the top, we can do that.

268
00:17:35,940 --> 00:17:40,920
Now I have our gap on the top, and then if we want to do the same thing for the bottom, let's say

269
00:17:40,920 --> 00:17:42,120
we want to add an offset down there.

270
00:17:42,120 --> 00:17:49,440
We could do four pixels, hit enter, and it's not really working because it's kind of buggy with the

271
00:17:49,440 --> 00:17:50,280
UI grid layouts.

272
00:17:50,280 --> 00:17:54,690
I believe if we have this set to two or actually no, it, no it's working.

273
00:17:54,840 --> 00:17:56,070
You can see our gap down there.

274
00:17:56,070 --> 00:17:57,540
Never mind okay.

275
00:17:57,540 --> 00:17:59,070
There's our gap on the bottom.

276
00:17:59,070 --> 00:18:00,300
There's our gap on the top.

277
00:18:00,300 --> 00:18:01,530
There's our gap on the side.

278
00:18:02,130 --> 00:18:08,490
And then if we want to add a gap between the objects and our scroll bar right here, then we can go

279
00:18:08,490 --> 00:18:09,840
ahead and do that as well.

280
00:18:09,840 --> 00:18:10,830
UI padding.

281
00:18:10,830 --> 00:18:13,890
Let's go ahead and offset by four pixels on the right.

282
00:18:14,930 --> 00:18:16,250
So now there we go.

283
00:18:16,250 --> 00:18:18,950
We kind of have our four pixel offset ish.

284
00:18:18,950 --> 00:18:19,580
I mean on the right.

285
00:18:19,580 --> 00:18:20,810
It's not working that well.

286
00:18:20,810 --> 00:18:26,960
If we went and enabled, I believe a vertical scroll bar inset and set that to always.

287
00:18:26,960 --> 00:18:27,440
Okay.

288
00:18:27,440 --> 00:18:31,580
Now we have kind of a larger gap between our scroll bar.

289
00:18:32,060 --> 00:18:34,580
And let me see if I disable the UI padding on the right.

290
00:18:34,580 --> 00:18:35,660
What's going to happen.

291
00:18:37,520 --> 00:18:38,990
Yeah, I guess that still works.

292
00:18:38,990 --> 00:18:45,560
The reason why we don't really need an extra gap here is because if you think about it, with our UI

293
00:18:45,560 --> 00:18:50,180
grid layout, we are subtracting the cell size on the x axis by five pixels.

294
00:18:50,180 --> 00:18:53,270
So there's automatically going to be a five pixel gap here.

295
00:18:53,270 --> 00:18:56,840
So technically you don't really need to add a gap on the right.

296
00:18:56,840 --> 00:19:01,430
It's going to be automatically done through our UI grid layout because we're subtracting the size on

297
00:19:01,430 --> 00:19:02,450
the x axis.

298
00:19:02,870 --> 00:19:08,510
But as you can see now we have a neat grid with padding on the top, the left, the bottom, and padding

299
00:19:08,510 --> 00:19:10,070
between each of the objects.

300
00:19:10,070 --> 00:19:14,510
And we can continue to duplicate and add as many of these objects in here as we want.

301
00:19:14,510 --> 00:19:19,850
And our scrolling frame is going to continue to resize to fit all of those objects.

302
00:19:19,850 --> 00:19:21,230
Very, very cool.

303
00:19:22,280 --> 00:19:28,520
There are some other organization type layouts such as tables or page layout.

304
00:19:28,520 --> 00:19:33,830
I'm not going to focus too much on those, because you won't likely use them as often as you will use

305
00:19:33,830 --> 00:19:35,900
UI list layout and UI grid layout.

306
00:19:35,930 --> 00:19:41,570
In fact, with all of the projects that I've personally worked on, I've never used a UI table layout

307
00:19:41,570 --> 00:19:43,070
or a UI page layout.

308
00:19:43,070 --> 00:19:45,260
That doesn't mean that you will never need to use those.

309
00:19:45,290 --> 00:19:49,700
There will probably be some situations where you might want to use them, but I'm not going to discuss

310
00:19:49,700 --> 00:19:53,030
them for now because personally I've never needed to use them.

311
00:19:53,550 --> 00:20:00,180
So the last two UI constraints we're going to take a look at is UI scale and UI text size constraint.

312
00:20:00,180 --> 00:20:02,580
So let's go ahead and get rid of our scrolling frame.

313
00:20:02,730 --> 00:20:05,190
And let's go ahead and add a text label in here.

314
00:20:06,630 --> 00:20:10,140
And let's go ahead and add a UI text size constraint.

315
00:20:10,140 --> 00:20:14,610
This is most useful if you have let's say text scaled enabled.

316
00:20:14,610 --> 00:20:17,310
So if I were to go and increase the size.

317
00:20:17,310 --> 00:20:21,300
So that way my text is at the maximum size possible.

318
00:20:21,300 --> 00:20:27,930
And if I were to decrease the max text size to let's say 30, as you can see, my text label has shrunk

319
00:20:27,930 --> 00:20:32,370
because it's not allowed to go beyond the text size of 30 for the font.

320
00:20:32,880 --> 00:20:35,520
So if I were to resize the label and shrink it down.

321
00:20:36,150 --> 00:20:39,150
You'll see that the label will continue to shrink.

322
00:20:39,150 --> 00:20:45,300
And then if I increase the size, it's going to grow until we hit the limit defined by our UI text size

323
00:20:45,300 --> 00:20:46,080
constraint.

324
00:20:46,110 --> 00:20:48,480
If we want to increase it, we can totally do that.

325
00:20:50,360 --> 00:20:52,130
And then we can decrease it as well.

326
00:20:52,130 --> 00:20:58,010
Kind of the main purpose of this constraint would be for any text labels that you have text scaled enabled

327
00:20:58,010 --> 00:21:03,620
with, but you don't want the text or the size of the font to go beyond a particular size.

328
00:21:03,620 --> 00:21:08,630
For example, if you have some text labels that are acting as a title and some other text labels that

329
00:21:08,630 --> 00:21:14,660
are acting as a description, you're going to want to have the title be larger in font size than the

330
00:21:14,660 --> 00:21:15,410
description.

331
00:21:15,410 --> 00:21:20,720
But if both of those objects have text scaled enabled, then they're going to basically be the same

332
00:21:20,720 --> 00:21:25,100
size depending on how much text you have entered inside of the text box.

333
00:21:25,100 --> 00:21:30,770
So the UI text size constraint allows us to constrain the size of that font whenever we need to.

334
00:21:31,370 --> 00:21:35,720
And then the very last UI constraint is going to be UI.

335
00:21:35,750 --> 00:21:36,680
Let me find it.

336
00:21:36,680 --> 00:21:39,410
Dun dun dun da dun UI scale.

337
00:21:39,410 --> 00:21:45,950
So if I add a UI scale in here, this is basically just going to scale my object up or down.

338
00:21:45,950 --> 00:21:46,670
That's it.

339
00:21:46,670 --> 00:21:51,800
So right now we're at a scale of one, which means it's going to remain the size that it currently is.

340
00:21:51,800 --> 00:21:59,660
But if I were to set this value to, let's say two now my text label is twice the size it normally is.

341
00:21:59,660 --> 00:22:05,960
If I set it to, let's say 0.5, now my text label is half the size that it normally is.

342
00:22:06,440 --> 00:22:09,590
Now, I've never used the UI scale constraint.

343
00:22:09,590 --> 00:22:11,960
There are probably some cases where you might want to use it.

344
00:22:11,960 --> 00:22:14,930
For example, maybe you want to animate a UI element.

345
00:22:14,930 --> 00:22:20,240
So you go ahead and tween this property to scale an object up or down.

346
00:22:20,240 --> 00:22:22,010
I guess that could be one use case for it.

347
00:22:22,010 --> 00:22:27,830
I've never had to personally use it, but it's just another option that the Roblox API gives to developers,

348
00:22:27,830 --> 00:22:29,360
so it's pretty cool.

349
00:22:29,360 --> 00:22:35,180
Now there is a small thing I forgot to mention with UI list layouts and UI grid layouts, and they have

350
00:22:35,180 --> 00:22:40,850
this property called Sort Order and you can set it equal to name or layout order.

351
00:22:40,850 --> 00:22:46,280
If you remember, in a previous lecture I talked about the layout order property, and this is mainly

352
00:22:46,280 --> 00:22:49,070
used with these different layout constraints.

353
00:22:49,070 --> 00:22:54,080
So for example, let me duplicate a couple of these green frames and let me change up their colors a

354
00:22:54,080 --> 00:22:54,530
bit.

355
00:22:54,530 --> 00:22:57,800
Let me make this one blue and then let me make this one red.

356
00:22:57,830 --> 00:23:01,610
Now let's say I actually want the red one to appear on top.

357
00:23:01,610 --> 00:23:04,820
Have the green one in the middle and the blue one on the bottom.

358
00:23:04,820 --> 00:23:09,470
Well, this is where we can utilize the sort order which is set to layout order.

359
00:23:09,470 --> 00:23:13,520
And this is where we manipulate the layout order property in these frames.

360
00:23:13,520 --> 00:23:18,800
For example, if I want the red one to be on top, then I need to keep its layout order at zero, and

361
00:23:18,800 --> 00:23:22,070
I need to adjust the layout order of the green object.

362
00:23:22,070 --> 00:23:28,580
And that's because the higher the layout order number, the lower it's going to be inside of your list

363
00:23:28,580 --> 00:23:30,170
layout or in your grid.

364
00:23:30,170 --> 00:23:36,170
So for example, if I want to shift the green frame downwards, let me go ahead and set the layout order

365
00:23:36,170 --> 00:23:36,980
to ten.

366
00:23:36,980 --> 00:23:41,810
Now this is going to shift it all the way to the bottom, because my blue frame has a layout order of

367
00:23:41,810 --> 00:23:42,800
zero as well.

368
00:23:42,800 --> 00:23:47,510
If I want to put this one at the bottom, then I simply need to enter in a value that is greater than

369
00:23:47,510 --> 00:23:50,120
my green frame, which would be something like 20.

370
00:23:50,150 --> 00:23:56,450
It's best to do these in increments of tens or hundreds, because that way you leave a little bit of

371
00:23:56,450 --> 00:24:02,120
wiggle room in case you need to make any future changes and insert elements between other different

372
00:24:02,120 --> 00:24:03,530
objects in your GUI.

373
00:24:03,530 --> 00:24:10,010
But the layout order allows us to be able to organize things in a list layout or in a grid layout however

374
00:24:10,010 --> 00:24:10,670
we want.

375
00:24:10,670 --> 00:24:16,100
The other option is to sort by name, which means you would sort the different frames by alphabetical

376
00:24:16,100 --> 00:24:16,580
order.

377
00:24:16,580 --> 00:24:19,820
For example, if I called this frame a, it will be at the top.

378
00:24:19,820 --> 00:24:23,150
If I call my red frame C, it would be at the bottom.

379
00:24:23,150 --> 00:24:25,820
And if I called my blue frame B, it's going to be in the middle.

380
00:24:25,820 --> 00:24:28,250
So we have a, b and C.

381
00:24:28,850 --> 00:24:29,330
All right.

382
00:24:29,330 --> 00:24:31,250
That's all from me for this lecture.

383
00:24:31,250 --> 00:24:34,940
And the next lecture we're going to take a look at GUI buttons.

384
00:24:34,940 --> 00:24:38,210
And we're going to listen to some of the events inside of those buttons.

385
00:24:38,210 --> 00:24:39,260
See you there.